<template>
<div style="width:400px;margin: 0 auto;text-align:center">

    
    <div>
        <h1>会员注册</h1>
    <Form ref="registerform" :model="form" :rules="rules" :label-width="120" @keydown.enter="handleSubmit">
        <FormItem label="用户类型：" prop="usertype">
            <RadioGroup v-model="form.usertype">
                <Radio label="3" >个人</Radio>
                <Radio label="4">企业</Radio>
                <Radio label="5">服务机构</Radio>
            </RadioGroup>
        </FormItem>
        <FormItem label="用户名：" prop="username">
            <Input v-model="form.username" placeholder="请输入用户名" > 
            </Input>
        </FormItem>
        <FormItem label="登陆密码：" prop="userpass1">
            <Input type="password" v-model="form.userpass1" placeholder="请输入密码" >
            </Input>
        </FormItem>
        <FormItem label ="确认密码：" prop="userpass2">
            <Input type="password" v-model="form.userpass2" placeholder="请确认密码"></Input>
        </FormItem>
        <FormItem label="手机号码：" prop="phonenumber">
            <Row>
                <Col span="15">
                    <Input v-model="form.phonenumber" placeholder="请输入手机号码"></Input>
                </Col>
                <Col span="8" style="margin-left:5px">
                    <Button type="primary" @click="getcheckcode" :disabled="flag">{{getcheck}}</Button>
                </Col>
            </Row>
        </FormItem>
        <FormItem label="验证码：" prop="checkcode" >
            <Input v-model="form.checkcode" @on-change ="checkauthcode()" ></Input><span style="color:red">{{mes}}</span>
        </FormItem>
        <FormItem>
            <Button type="primary"  @click="handleSubmit" :disabled="!ints2">注册</Button>
        </FormItem>
        
    </Form>
    </div>
    <Modal
        v-model="modal1"
        title="提示"
        @on-ok="ok"
        @on-cancel="cancel">
        <p>注册成功，点击确定跳转到登陆页面</p>
    </Modal>
</div>
</template>

<script>
import Cookies from 'js-cookie';

export default {
   data(){
        const validateusername = (rule, value, callback) => {
            this.api.post("member/check_username",{name: value},res=>{
                if(!res.value){
                    callback(new Error('用户名已被占用'));
                }else{
                    callback();
                }
            })
        };
        const validatephoonenumber = (rule, value, callback) => {
            if(this.getcheck=="获取验证码"){
                if(!(/^1[3|4|5|8|7|9][0-9]\d{4,8}$/.test(value))){
                    callback(new Error('请输入正确格式的手机号码'));
                }
            }
            this.api.post("phone/check_phonenumber",{phonenumber: value},res=>{
                if(!res.value){
                    callback(new Error('手机号已绑定，请使用其他手机号'));
                    this.$CustomMessage.error("手机号已绑定，请使用其他手机号");
                }else{
                callback();
                }
            })
        };
       const validatePassCheck = (rule, value, callback) => {
           
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.form.userpass1) {
                callback(new Error('两次输入的密码不一致'));
            } else {
                callback();
            }
        };
        const validatePhoneCheck = (rule, value, callback)=>{
            if(this.getcheck=="获取验证码"){
                if(!(/^1[3|4|5|8|7|9][0-9]\d{4,8}$/.test(value))){
                callback(new Error('请输入正确格式的手机号码'));
            }else{
                callback();
            }
            }
            callback();
            
        };
        
        return{
            mes:"",
            modal1:false,
            flag: false,
            getcheck:"获取验证码",
            ints1: false,
            ints2: false,
            clock: '',
            msg:'',
            nums:10,
            form:{
                
                usertype:"3",
                username:"",
                userpass1:"",
                userpass2:"",
                phonenumber:"",
                checkcode:"",
            },
            rules: {
                usertype: [
                    { required: true, message: '用户类型不能为空', trigger: 'blur'}
                ],
                username: [
                    { required: true, message: '账号不能为空', trigger: 'blur' },
                    { required: true, validator: validateusername, trigger: 'blur'}
                ],
                userpass1: [
                    { required: true, message: '密码不能为空', trigger: 'blur' }
                ],
                userpass2: [
                    { required: true, validator: validatePassCheck, trigger: 'blur' }
                ],
                phonenumber: [
                    { required: true, message: '手机号码不能为空', trigger: 'blur' },
                    { required: true, validator: validatephoonenumber, trigger:'blur'}
                ],
            }
        }
    },
    created(){
        if(Cookies.get('access') == "member") {
            this.$router.push({ name: "index" });
        }
    },
    methods: {
        checkauthcode(){
            this.api.post("phone/check_auth_code",{auth_code: this.form.checkcode}, res => {
                this.ints2 = res.value;
                if(res.value==false&&this.form.checkcode.length==6){
                    this.mes="验证码输入错误";
                }
                if(res.value==true){
                    this.mes="";
                }
            })
        },
        ok(){
            this.$router.push({
                name: 'login'
            });
        },
        cancel(){
            this.modal1=false;
        },
        handleSubmit(){
            this.$refs.registerform.validate((valid) => {
                if (valid) {
                    if(this.ints2 == true){
                        this.api.post("member/register",{username: this.form.username, role_type: this.form.usertype, password: this.form.userpass1, mobile_phone: this.form.phonenumber}, res=>{
                            this.ints2 = res.value;
                            console.log(this.ints2);
                            if(this.ints2 == true){
                                this.$CustomMessage.info("注册成功");
                                this.modal1=true;
                            }
                            else
                            {
                                this.$CustomMessage.info(res.message);
                            }
                            
                        })
                        
                    }
                }
            });    
            
            
        },
        
        getcheckcode(){
            this.$refs.registerform.validate(valid => {
                if(valid) {
                    this.api.post("phone/send_auth_code",{mobile_phone: this.form.phonenumber,type_2:1},res=>{
                        this.ints1=res.value;
                        console.log(res.message);
                        if(this.ints1 == true){
                            this.$CustomMessage.success("验证码发送成功");
                            this.flag = true;
                            this.nums = 60;
                            this.getcheck = this.nums+"秒后可重新获取验证码";
                            this.clock = setInterval( res => {
                                this.nums--;
                                if(this.nums > 0){
                                    this.getcheck=this.nums+"秒后可重新获取验证码";
                                }
                                else{
                                    clearInterval(this.clock);
                                    this.flag = false;
                                    this.getcheck = "获取验证码";
                                }
                            }, 1000);
                        }
                        else
                        {
                            this.$CustomMessage.error(res.message);
                        }
                    });
                }
            });
            // this.api.post("phone/check_phonenumber",{phonenumber: this.form.phonenumber},res=>{
            //     if(res.value){
            //         this.api.post("phone/send_auth_code",{mobile_phone: this.form.phonenumber},res=>{
            //             this.ints1=res.value;
            //             console.log(res.message);
            //             if(this.ints1 == true){
            //                 this.$CustomMessage.info("验证码发送成功");
            //                 this.flag = true;
            //                 this.nums = 60;
            //                 this.getcheck = this.nums+"秒后可重新获取验证码";
            //                 this.clock = setInterval( res => {
            //                     this.nums--;
            //                     if(this.nums > 0){
            //                         this.getcheck=this.nums+"秒后可重新获取验证码";
            //                     }
            //                     else{
            //                         clearInterval(this.clock);
            //                         this.flag = false;
            //                         this.getcheck = "获取验证码";
            //                     }
            //                 }, 1000);
            //             }
            //             else
            //             {
            //                 this.$CustomMessage.info(res.message);
            //             }
                        
            //         });
            //     }else{
            //         this.$CustomMessage.info(res.message);
            //     }
            // })
            
            
        }
        
    }
};
</script>